{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Neon Admin Panel">
    <meta name="author" content="">

    <title>首页</title>


    <link rel="stylesheet" href="/static/css/jquery-ui-1.10.3.custom.min.css">
    <link rel="stylesheet" href="/static/css/entypo.css">
    <link rel="stylesheet" href="/static/css/css.css">
    <link rel="stylesheet" href="/static/css/bootstrap.css">
    <link rel="stylesheet" href="/static/css/neon-core.css">
    <link rel="stylesheet" href="/static/css/neon-theme.css">
    <link rel="stylesheet" href="/static/css/neon-forms.css">
    <link rel="stylesheet" href="/static/css/custom.css">

    <script src="/static/js/jquery-1.11.0.min.js"></script>
    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>


</head>
<body class="page-body  page-left-in" data-url="http://neon.dev">

<div class="page-container">
    <div class="sidebar-menu">


        <header class="logo-env">

            <div class="logo">
                <a href="/myApp/home/">
                    <h3 style="color: #fff;font-weight: bold;margin-top: 5px;">BOSS直聘可视化分析</h3>
                </a>
            </div>

        </header>

        <div class="sidebar-user-info">

            <div class="sui-normal">
                <a href="#" class="user-link">
                    {#这里直接调用views发送请求的键名#}
                    <img style="width:95%" src="/media/{{ userAvatar }}" alt="" class="img-circle">

                    <span style="text-align: center;padding-top: 209px">欢迎回来</span>
                    <strong style="text-align: center;margin-top: 5px">{{ username }}</strong>
                </a>
            </div>

        </div>


            <ul id="main-menu" class="">
                <li class="opened active">
                    <a href="/myApp/home">
                        <i class="entypo-gauge"></i>
                        <span>首页</span>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <i class="entypo-user"></i>
                        <span>个人中心</span>
                    </a>
                    <ul>
                        <li>
                            <a href="/myApp/selfInfo">
                                <span>个人信息</span>
                            </a>
                        </li>
                        <li>
                            <a href="/myApp/changePassword">
                                <span>修改密码</span>
                            </a>
                        </li>
                    </ul>
                </li>
                <li>
                    <a href="#">
                        <i class="entypo-layout"></i>
                        <span>数据统计</span>
                    </a>
                    <ul>
                        <li>
                            <a href="/myApp/tableData">
                                <span>数据总览</span>
                            </a>
                        </li>
                        <li>
                            <a href="/myApp/historyTableData">
                                <span>历史查阅</span>
                            </a>
                        </li>
                    </ul>
                </li>
                <li>
                    <a href="#">
                        <i class="entypo-chart-bar"></i>
                        <span>可视化图表</span>
                    </a>
                    <ul>
                        <li>
                            <a href="/myApp/salary">
                                <i class="entypo-light-down"></i>
                                <span>薪资情况</span>
                            </a>
                        </li>
                        <li>
                            <a href="/myApp/company">
                                <i class="entypo-feather"></i>
                                <span>企业情况</span>
                            </a>
                        </li>
                        <li>
                            <a href="/myApp/companyTags">
                                <i class="entypo-lamp"></i>
                                <span>福利词云</span>
                            </a>
                        </li>
                        <li>
                            <a href="/myApp/educational">
                                <i class="entypo-graduation-cap"></i>
                                <span>学历分布</span>
                            </a>
                        </li>
                        <li>
                            <a href="/myApp/companyStatus">
                                <i class="entypo-network"></i>
                                <span>企业融资</span>
                            </a>
                        </li>
                        <li>
                            <a href="/myApp/address">
                                <i class="entypo-rocket"></i>
                                <span>城市类型</span>
                            </a>
                        </li>
                    </ul>
                </li>
            </ul>

    </div>
    <div class="main-content">

        <div class="row">
            <!-- Raw Links -->
            <div style="display:flex;" class="col-md-12 hidden-xs">

                <ul style="margin-left:auto" class="list-inline links-list pull-right">

                    <li class="sep"></li>

                    <li>
                        <a href="/myApp/logOut">
                            退出登录 <i class="entypo-logout right"></i>
                        </a>
                    </li>
                </ul>

            </div>

        </div>

        <hr style="margin-top:0">


        <div class="row">
            <div class="col-sm-12">
                <div class="well" style="padding:7px;padding-left:20px">
                    <h1>{{ month }} {{ day }}, {{ year }}</h1>
                    <h3>Have a nice day! <strong>{{ username }}</strong></h3>
                </div>
            </div>
        </div>

        <div class="row">

            <div class="col-sm-9">

                <div class="row">

                    <div class="col-sm-6">

                        <div class="panel panel-default">
                            <div class="panel-heading">
                                <div class="panel-title">用户创建时间饼状图</div>
                                <div class="panel-options">
                                    <a href="#" data-rel="collapse"><i class="entypo-down-open"></i></a>
                                    <a href="#" data-rel="reload"><i class="entypo-arrows-ccw"></i></a>
                                </div>
                            </div>
                            <div class="panel-body">
                                <div id="main" style="width:100%;height:300px">

                                </div>
                            </div>
                        </div>

                    </div>

                    <div class="col-sm-6">

                        <div class="panel panel-default">
                            <div class="panel-heading">
                                <div class="panel-title">最新用户信息</div>
                                <div class="panel-options">
                                    <a href="#" data-rel="collapse"><i class="entypo-down-open"></i></a>
                                    <a href="#" data-rel="reload"><i class="entypo-arrows-ccw"></i></a>
                                </div>
                            </div>
                            <table class="table table-bordered table-responsive">
                                <thead>
                                <tr>
                                    <th>#</th>
                                    <th>用户名</th>
                                    <th>密码（MD5）</th>
                                    <th>创建时间</th>
                                    <th>用户头像</th>
                                </tr>
                                </thead>
                                <tbody>
                                {% for item in newUser %}
                                    <tr>
                                        <td>{{ forloop.counter }}</td>
                                        <td>{{ item.username }}</td>
                                        <td>{{ item.password }}</td>
                                        <td>{{ item.createTime }}</td>
                                        <td class="text-center">
                                            <img src="/media/{{ item.avatar }}" alt="" class="img-circle" width="32">
                                        </td>
                                    </tr>
                                {% endfor %}
                                </tbody>
                            </table>
                        </div>

                    </div>

                </div>


                <div class="panel panel-default">
                    <div class="panel-heading">
                        <div class="panel-title">
                            <h4>
                                数据获取时间柱状图
                            </h4>
                        </div>

                        <div class="panel-options">
                            <a href="#" data-rel="collapse"><i class="entypo-down-open"></i></a>
                            <a href="#" data-rel="reload"><i class="entypo-arrows-ccw"></i></a>
                        </div>
                    </div>

                    <div class="panel-body">
                        <div id='mainOne' style="width:100%;height:450px"></div>
                    </div>
                </div>

            </div>

            <div class="col-sm-3">
                <div class="tile-stats tile-green">
                    <div class="icon"><i class="entypo-chart-bar"></i></div>
                    <div class="num" data-start="0" data-end="{{ jobsLen }}" data-postfix="" data-duration="1500"
                         data-delay="600">{{ jobsLen }}
                    </div>

                    <h3>数据总量统计</h3>
                </div>
                <div class="tile-stats tile-red">
                    <div class="icon"><i class="entypo-users"></i></div>
                    <div class="num" data-start="0" data-end="{{ usersLen }}" data-postfix="" data-duration="1500"
                         data-delay="0">
                        {{ usersLen }}
                    </div>

                    <h3>用户数量统计</h3>
                </div>
                <div class="tile-stats tile-aqua">
                    <div class="icon"><i class="entypo-mail"></i></div>
                    <div class="num" style="font-size: 24px">{{ educationsTop }}
                    </div>

                    <h3>行业最高学历</h3>
                </div>
                <div class="tile-stats tile-orange">
                    <div class="icon"><i class="entypo-infinity"></i></div>
                    <div class="num" data-start="0" data-end="{{ salaryTop }}" data-postfix="" data-duration="1500"
                         data-delay="1800">{{ salaryTop }}
                    </div>

                    <h3>行业最高薪资</h3>
                </div>
                <div class="tile-stats tile-cyan">
                    <div class="icon"><i class="entypo-network"></i></div>
                    <div class="num" style="font-size: 24px">{{ addressTop }}
                    </div>

                    <h3>优势地点</h3>
                </div>
                <div class="tile-stats tile-brown">
                    <div class="icon"><i class="entypo-briefcase"></i></div>
                    <div class="num" data-start="0" data-end="{{ salaryMonthTop }}" data-postfix="" data-duration="1500"
                         data-delay="1800">{{ salaryMonthTop }}
                    </div>

                    <h3>最高年底多薪</h3>
                </div>
                <div class="tile-stats tile-purple">
                    <div class="icon"><i class="entypo-briefcase"></i></div>
                    <div class="num" style="font-size: 24px">
                        {% if practiceMax %}
                            实习岗位
                        {% else %}
                            正式岗位
                        {% endif %}
                    </div>

                    <h3>岗位性质</h3>
                </div>
            </div>
        </div>


        <div class="row">
            <div class="col-sm-12">
                <div class="panel panel-default" data-collapsed="0"><!-- to apply shadow add class "panel-shadow" -->
                    <!-- panel head -->
                    <div class="panel-heading">
                        <div class="panel-title">数据表格</div>

                        <div class="panel-options">
                            <a href="#" data-rel="collapse"><i class="entypo-down-open"></i></a>
                            <a href="#" data-rel="reload"><i class="entypo-arrows-ccw"></i></a>
                        </div>
                    </div>
                    <div class="panel-body">
                        <table class="table table-bordered datatable" id="table-1">
                            <thead>
                            <tr>
                                <th>编号</th>
                                <th>职位名字</th>
                                <th>工作地点</th>
                                <th>职位类型</th>
                                <th>学历要求</th>
                                <th>工作经验</th>
                                <th>工作标签</th>
                                <th>最高薪水</th>
                                <th>年底多薪</th>
                                <th>是否实习</th>
                                <th>公司名称</th>
                                <th>公司福利</th>
                                <th>公司封面</th>
                                <th>融资阶段</th>
                                <th>公司人数</th>
                                <th>跳转</th>
                            </tr>
                            </thead>
                            <tbody>
                            {% for job in tableData %}
                                <tr class="gradeU">
                                    <td>{{ forloop.counter }}</td>
                                    <td>
                                        <a target="__blank"
                                           href="https://www.zhipin.com/web/geek/job?query={{ job.title }}&city=100010000">{{ job.title }}</a>
                                    </td>
                                    <td>{{ job.address }}</td>
                                    <td class="center">{{ job.type }}</td>
                                    <td class="center">{{ job.educational }}</td>
                                    <td class="center">{{ job.workExperience }}</td>
                                    <td class="center">{{ job.workTag }}</td>
                                    <td class="center">
                                        {% if job.practice %}
                                            {{ job.salary }}/天
                                        {% else %}
                                            {{ job.salary }}/月
                                        {% endif %}
                                    </td>
                                    <td class="center">
                                        {% if job.salaryMonth != '0' %}
                                            {{ job.salaryMonth }}薪
                                        {% else %}
                                            无
                                        {% endif %}
                                    </td>
                                    <td class="center">
                                        {% if job.practice != 0 %}
                                            实习岗位
                                        {% else %}
                                            普通岗位
                                        {% endif %}
                                    </td>
                                    <td class="center">
                                        {{ job.companyTitle }}
                                    </td>
                                    <td class="center">
                                        {{ job.companyTags }}
                                    </td>
                                    <td class="center">
                                        <img src="{{ job.companyAvatar }}" alt="">
                                    </td>
                                    <td class="center">
                                        {{ job.companyStatus }}
                                    </td>
                                    <td>
                                        {{ job.companyPeople }}
                                    </td>
                                    <td class="center text-center">
                                        <a target="_blank" href="{{ job.detailUrl }}" class="btn btn-info"
                                           style="margin-bottom: 5px">岗位详情</a>
                                        <a target="__blank" href="{{ job.companyUrl }}" style="margin-bottom: 5px"
                                           class="btn btn-success">公司详情</a>
                                        {#动态路由#}
                                        <a target="__blank" href="/myApp/addHistory/{{ job.id }}"
                                           class="btn btn-danger">添加历史</a>
                                    </td>
                                </tr>
                            {% endfor %}
                            </tbody>
                        </table>

                    </div>
                </div>

            </div>
        </div><!-- Footer -->
        <footer class="main">


            Copyright &copy; 2022. BOSS直聘数据可视化分析 <a target="_blank"
                                                    href="https://www.zhipin.com/?ka=header-home">BOSS直聘</a>

        </footer>
    </div>


</div>


<link rel="stylesheet" href="/static/css/jquery-jvectormap-1.2.2.css">
<link rel="stylesheet" href="/static/css/rickshaw.min.css">

<script src="/static/js/main-gsap.js"></script>
<script src="/static/js/jquery-ui-1.10.3.minimal.min.js"></script>
<script src="/static/js/bootstrap.js"></script>
<script src="/static/js/joinable.js"></script>
<script src="/static/js/resizeable.js"></script>
<script src="/static/js/neon-api.js"></script>
<script src="/static/js/jquery.sparkline.min.js"></script>
<script src="/static/js/d3.v3.js"></script>
<script src="/static/js/rickshaw.min.js"></script>
<script src="/static/js/raphael-min.js"></script>
<script src="/static/js/morris.min.js"></script>
<script src="/static/js/toastr.js"></script>
<script src="/static/js/neon-chat.js"></script>
<script src="/static/js/neon-custom.js"></script>
<script src="/static/js/neon-demo.js"></script>
<link rel="stylesheet" href="/static/css/datatables.responsive.css">

<script src="/static/js/datatables.responsive.js"></script>
<script src="/static/js/jquery.dataTables.columnFilter.js"></script>
<script src="/static/js/jquery.dataTables.min.js"></script>
<script src="/static/js/TableTools.min.js"></script>
<script src="/static/js/dataTables.bootstrap.js"></script>
<script src="/static/js/lodash.min.js"></script>
</body>
<script src="/static/js/echarts.js"></script>
<script type="text/javascript">
    var responsiveHelper;
    var breakpointDefinition = {
        tablet: 1024,
        phone: 480
    };
    var tableContainer;

    jQuery(document).ready(function ($) {
        tableContainer = $("#table-1");

        tableContainer.dataTable({
            "sPaginationType": "bootstrap",
            "aLengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]],
            "bStateSave": true,


            // Responsive Settings
            bAutoWidth: false,
            fnPreDrawCallback: function () {
                // Initialize the responsive datatables helper once.
                if (!responsiveHelper) {
                    responsiveHelper = new ResponsiveDatatablesHelper(tableContainer, breakpointDefinition);
                }
            },
            fnRowCallback: function (nRow, aData, iDisplayIndex, iDisplayIndexFull) {
                responsiveHelper.createExpandIcon(nRow);
            },
            fnDrawCallback: function (oSettings) {
                responsiveHelper.respond();
            }
        });

        $(".dataTables_wrapper select").select2({
            minimumResultsForSearch: -1
        });
    });
</script>
<script>

    var chartDom = document.getElementById('main');
    var myChart = echarts.init(chartDom);
    var option;

    option = {
        tooltip: {
            trigger: 'item'
        },
        legend: {
            top: '5%',
            left: 'center'
        },
        series: [
            {
                name: '用户个数',
                type: 'pie',
                radius: ['40%', '70%'],
                center: ['50%', '60%'],
                avoidLabelOverlap: false,
                itemStyle: {
                    borderRadius: 10,
                    borderColor: '#fff',
                    borderWidth: 2
                },
                label: {
                    show: false,
                    position: 'center'
                },
                emphasis: {
                    label: {
                        show: true,
                        fontSize: '20',
                        fontWeight: 'bold'
                    }
                },
                labelLine: {
                    show: false
                },
                data: {{ userTime | safe }}
            }
        ]
    };

    option && myChart.setOption(option);

</script>
<script>
    var chartDom = document.getElementById('mainOne');
    let data = {{ allJobsPBar | safe}};
    console.log(data)
    var myChart = echarts.init(chartDom);
    let xRes = [];
    for (var i = 0; i < 5; i++) {
        xRes.push(data[i][0])
    }
    let yRes = [];
    for (var i = 0; i < 5; i++) {
        yRes.push(data[i][1])
    }
    let yResTwo = []
    for (var i = 0; i < 5; i++) {
        yResTwo.push(data[i][2])
    }
    let options = {
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'cross',
                label: {
                    backgroundColor: '#283b56'
                }
            }
        },
        toolbox: {
            show: true,
            feature: {
                dataView: {readOnly: false},
                magicType: {type: ['line', 'bar']},
                saveAsImage: {}
            }
        },
        legend: {
            data: ['爬取数据量', '数据平均值']
        },
        xAxis: {
            type: 'category',
            data: xRes, // 把时间组成的数组接过来，放在x轴上
            boundaryGap: true
        },
        yAxis: [{
            type: 'value',
            name: '爬取数据量',
            axisLabel: {
                formatter: '{value} 个'
            }
        },
            {
                type: 'value',
                name: '数据平均值',
                min: 0,
                max: 100,
                axisLabel: {
                    formatter: '{value} %'
                },
                splitLine: {show: false},
            }],
        series: [
            {
                data: yRes,
                type: 'bar',
                name: '爬取数据量',
                markPoint: {
                    data: [
                        {type: 'max', name: '最大值'},
                        {type: 'min', name: '最小值'}
                    ]
                },

                color: {
                    type: 'linear',
                    x: 0, //右
                    y: 0, //下
                    x2: 0, //左
                    y2: 1, //上
                    colorStops: [
                        {
                            offset: 0,
                            color: '#11d56d' // 0% 处的颜色
                        },
                        {
                            offset: 1,
                            color: '#83bff6' // 100% 处的颜色
                        }
                    ]
                }
            },
            {
                data: yResTwo,
                type: 'bar',
                name: '数据平均值',
                yAxisIndex: 1,
                markPoint: {
                    data: [
                        {type: 'max', name: '最大值'},
                        {type: 'min', name: '最小值'}
                    ]
                },
                color: {
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [
                        {offset: 0, color: '#cd7cf3'},
                        {offset: 1, color: '#de5df2'}
                    ]
                },
            }
        ]
    }
    let count = 5;
    setInterval(function () {
        if (count >= data.length) {
            count = 0
        }
        xRes.shift()
        xRes.push(data[count][0])

        yRes.shift()
        yRes.push(data[count][1])

        yResTwo.shift()
        yResTwo.push(data[count][2])

        count++

        myChart.setOption({
            xAxis: [
                {
                    data: xRes
                }
            ],
            series: [
                {
                    data: yRes
                },
                {
                    data: yResTwo
                }
            ]
        })
    }, 2000)
    options && myChart.setOption(options);
</script>

</html>

